<template>
  <div class="createPost-container">
    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
      <sticky :z-index="10" :class-name="'sub-navbar ' + postForm.status">
        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
          Publish
        </el-button>
      </sticky>

      <el-steps :active="1" align-center class="showProcess">
        <el-step title="生产商" icon="el-icon-edit" description="正在录入信息..."></el-step>
        <el-step title="运输方" description="未录入"></el-step>
        <el-step title="代理商" description="未录入"></el-step>
        <el-step title="经销商" description="未录入"></el-step>
      </el-steps>

      <div class="createPost-main-container">
        <el-row>
          <el-col :span="24">
            <el-form-item style="margin-bottom: 10px;" prop="name">
              <MDinput v-model="postForm.name" :maxlength="100" name="name" required>
                药材名称
              </MDinput>
            </el-form-item>

            <el-form-item style="margin-bottom: 10px;" prop="farmer_id">
              <MDinput v-model="postForm.farmer_id" :maxlength="100" name="farmer_id" required>
                种植户ID
              </MDinput>
            </el-form-item>

            <el-form-item style="margin-bottom: 10px;" prop="producer_id">
              <MDinput v-model="postForm.producer_id" :maxlength="100" name="producer_id" required>
                生产商ID
              </MDinput>
            </el-form-item>

            <el-form-item style="margin-bottom: 10px;" prop="purch_time">
              <MDinput v-model="postForm.purch_time" :maxlength="100" name="purch_time" required>
                购买时间 (年/月/日 时:分)
              </MDinput>
            </el-form-item>

            <el-form-item style="margin-bottom: 10px;" prop="amount">
              <MDinput v-model="postForm.amount" :maxlength="100" name="amount" required>
                药材入库数量
              </MDinput>
            </el-form-item>

            <el-form-item style="margin-bottom: 10px;" prop="category">
              <MDinput v-model="postForm.category" :maxlength="100" name="category" required>
                药材类别
              </MDinput>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import MDinput from '@/components/MDinput'
import Sticky from '@/components/Sticky' // 粘性header组件
import Warning from './components/Warning'
import axios from "axios"

const defaultForm = {
  status: 'draft', // 提交状态(draft/published) 后续开发使用
  name: '', // 药材名称
  farmer_id: '', // 种植户ID
  producer_id: '', // 生产商ID
  category: '', // 药材类别
  amount: '', // 药材入库数量
  purch_time: '' //购买时间
}

export default {
  name: 'ArticleDetail',
  components: {MDinput, Sticky, Warning},

  data() {
    const validateRequire = (rule, value, callback) => {
      if (value === '') {
        this.$message({
          message: rule.name + '为必填项',
          type: 'error'
        })
        callback(new Error(rule.name + '必须填写'))
      } else {
        callback()
      }
    }
    return {
      postForm: Object.assign({}, defaultForm),
      loading: false,
      userListOptions: [],
      status: false,
      rules: {
        name: [{validator: validateRequire, name: "药材名称"}],
        farmer_id: [{validator: validateRequire, name: "种植户ID"}],
        producer_id: [{validator: validateRequire, name: "生产商ID"}],
        category: [{validator: validateRequire, name: "药材类别"}],
        amount: [{validator: validateRequire, name: "药材入库数量"}],
        purch_time: [{validator: validateRequire, name: "购买时间"}]
      },
      tempRoute: {}
    }
  },
  computed: {
    contentShortLength() {
      return this.postForm.content_short.length
    },
    lang() {
      return this.$store.getters.language
    },
    displayTime: {
      // set and get is useful when the data
      // returned by the back end api is different from the front end
      // back end return => "2013-06-25 06:59:25"
      // front end need timestamp => 1372114765000
      get() {
        return (+new Date(this.postForm.display_time))
      },
      set(val) {
        this.postForm.display_time = new Date(val)
      }
    }
  },
  created() {
    // Why need to make a copy of this.$route here?
    // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
    // https://github.com/PanJiaChen/vue-element-admin/issues/1221
    this.tempRoute = Object.assign({}, this.$route)
  },
  methods: {
    submitForm() {
      var _this = this
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.loading = true
          console.log(this.postForm)
          axios({
            method: 'post',
            url: 'http://59.110.231.162:8181/medicine/in',
            data: {
              "amount": this.postForm.amount,
              "category": this.postForm.category,
              "farmer_id": this.postForm.farmer_id,
              "id": null,
              "in_time": null,
              "name": this.postForm.name,
              "out_time": null,
              "producer_id": this.postForm.producer_id,
              "purch_time": this.postForm.purch_time,
              "tra_code": null
            },
            headers: {
              "token": this.$store.state.user.token
            }
          }).then(function (res) {
            console.log('submitForm Success: ');
            console.log(res.data);
            // _this.loading = true;
            _this.$notify({
              title: '成功',
              message: '药材入库成功',
              type: 'success',
              duration: 10000
            })
            _this.postForm.status = 'published'
            _this.loading = false
          }).catch(function (err) {
            // axios error
            var msg = ''
            if (err.response.status === 400) {
              msg = 'ID输入类型不匹配'
            } else if (err.response.status === 403) {
              msg = '服务器拒绝入库请求 请重新登陆'
            } else if (err.response.status === 500) {
              msg = '请核对购买时间格式'
            }
            _this.loading = false
            _this.postForm.status = 'draft'
            _this.$notify({
              title: '失败',
              message: '服务器拒绝了您的入库请求 原因: ' + msg,
              type: 'error',
              duration: 5000
            })
            console.log('submitForm Error: ')
            console.log(err)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}

.article-textarea ::v-deep {
  textarea {
    padding-right: 40px;
    resize: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #bfcbd9;
  }
}

.showProcess {
  margin-top: 20px;
}
</style>
